<template>
	<view class="css-body">
		<view class="address-wrapper">
			<view class="title">
				欢迎登录
			</view>
			<view class="container">
				<view class="input-item">
					<u--input placeholder="请输入登录账号" border="surround" clearable v-model="form.name"
						style="height: 44px;"></u--input>
				</view>
				<view class="input-item">
					<u--input placeholder="请输入登录密码" border="surround" password clearable v-model="form.password"
						style="height: 44px;"></u--input>
				</view>
			</view>

			<u-button class="determine" @click="submit" loadingText="登录中" size="normal" :loading="isLoading"
				loadingMode="circle">登录</u-button>
			<view class="css-register" @click="handleGoRegister">
				还没有账号？<span style="color: #D72743;">立即注册 </span>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../util/util.js"

	export default {
		data() {
			return {
				showPassword: true,
				form: {
					name: "",
					password: "",
				},
				isLoading: false
			}
		},
		methods: {
			handleGoRegister() {
				uni.reLaunch({
					url: "/pages/register/register"
				})
			},
			submit() {
				let addr = this.form;
				if (addr.name == "" || addr.name.length < 1) {
					uni.showToast({
						title: "请输入账号!",
						icon: "none"
					})
					return;
				}
				if (addr.password == "" || addr.password.length < 1) {
					uni.showToast({
						title: "请输入密码!",
						icon: "none"
					})
					return;
				}

				const baseURL = getApp().globalData.baseURL; //  pro_gdapp_h5
				this.isLoading = true;
				uni.request({
					url: baseURL + "/liantong/login",
					data: {
						username: this.form.name,
						password: this.form.password
					},
					method: "POST",
					success: (res) => {
						console.log(res);
						if (res.data.code == 0 || res.data.code == 200) {

							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('phonenumber', res.data.phonenumber);
							uni.setStorageSync('username', res.data.username);
							uni.setStorageSync('inviteCode', res.data.inviteCode);

							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
						uni.showToast({
							title: res.data.msg || res.data.message,
							icon: "none"
						})
						this.isLoading = false;
					},
					fail: (err) => {
						uni.showToast({
							title: err.errMsg,
							icon: "none"
						});
						this.isLoading = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.css-body {
		padding: 30px 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 44px;
	}

	.css-register {
		text-align: center;
		margin-top: 10px;
		color: #666;
	}

	.address-wrapper {
		width: 90vw;
		border-radius: 20rpx;
		// overflow: hidden;
		background-color: #fff;
		padding: 20px 0;
		position: relative;

		.close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: -25rpx;
			top: -25rpx;
			border-radius: 50%;
		}

		.title {
			width: 100%;
			text-align: center;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			font-size: 26px;
		}

		.container {
			padding: 0 20rpx;
			margin: 80px 0;

			.label {
				display: block;
				margin: 40rpx 0 20rpx;
				font-weight: bold;
				font-size: $uni-font-size-base;
			}
		}

		.remind-choose {
			width: 100%;
			margin: 40rpx auto 0;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			padding-bottom: 10rpx;
		}

		.determine {
			width: calc(100% - 40rpx);
			height: 44px;
			line-height: 44px;
			background-color: #D72743;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			margin: auto;
			border-radius: 8px;
			color: white;
		}

		.input-item {
			margin-bottom: 20px;
		}

		.input-item,
		.address-wrap {
			width: 100%;

			.form-item {
				height: 80rpx;
				border: 1px solid #d7d7d7;
				border-radius: 10rpx;
			}

			.input-box {
				width: 100%;
				height: 100%;
				font-size: $uni-font-size-base;
				padding: 0 20rpx;
			}

			.address-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-base;

				.address-item {
					width: 30%;
					max-width: 30%;
					height: 80rpx;
					flex: 1;
					padding: 0 30rpx;
					position: relative;
					display: flex;
					align-items: center;
					border: 1px solid #d7d7d7;
					border-radius: 10rpx;
					box-sizing: border-box;

					&:before {
						content: "";
						position: absolute;
						right: 30rpx;
						width: 18rpx;
						height: 18rpx;
						background-image: url();
						background-repeat: no-repeat;
						background-size: 100% auto;
					}
				}
			}
		}

		.tips {
			width: 100%;
			height: 25rpx;
			margin: 40rpx auto 30rpx;
			font-size: $uni-font-size-sm;
			color: $theme-color;
		}
	}
</style>